/*.command-dispatch-main{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .div-head{
    width: 100%;
    height: 64px;
  }
  .main-content{
    width: 100%;
    height: calc(~"100% - 64px");
    display: flex;
    flex-direction: row;

    .left-content{
      width: 300px;
      height: 100%;
      border: 1px solid #e30c0c;
    }
    .right-content{
      width: 100%;
      height: 100%;
      border: 1px solid #8ef8e7;
    }
  }
};*/


//底部播放框
/*
  .foot-play-frame{
    width:100%;
    height:100%;
    .box_site5 {
      width:100%;
      height:100%;
      background-color: #000;
      display: flex;
      flex-wrap: wrap;

            .div_main5 {
              width: calc(100% / 2);
              height: calc(100% / 2);
              border: 1px solid #14edc5;
              box-sizing: border-box;

            }
      .div_site5 {
        width: calc(100% / 5);
        height: 100%;//calc(100% / 2);
        border: 1px solid #14edc5;
        box-sizing: border-box;
      }
    }
  }
  */
.command-dispatch-main{
  width: 100%;
  height: 100%;
  border: 1px solid #aff;
  display: flex;
  flex-direction: column;
  .head-content{
    width: 100%;
    height: 64px;
  }
  .main-content{
    width: 100%;
    height: 100%;
    border: 1px solid #e30c0c;
    display: flex;
    flex-direction: row;
    .device-list{
      width: 300px;
      height: 100%;
      border: 1px solid #1983ef;
      display: flex;
      flex-direction: row;
    }
    .map-content{
      width: 100%;
      height: 100%;
      border: 1px solid #056b05;

    }
  }

}
/*右弹框*/
.right-div {
  top:70px;

  //height: 100%;
  bottom: 0;
  position: fixed;
  right: 0;
  z-index: 100;
  //background-color: #2d8cf0;

  .width453 {
    width: 453px;
  }
  .width0{
    width: 0px;
  }
  .right_drawer {
    width:400px;
    height: 100%;
    background: #f1f7ff;
    float: right;
    -webkit-transition: width .3s;
    transition: width .3s;
    border: 1px solid #14edc5;
    border-top-left-radius: 7px;
  }
  .rightbox{
    float: right;
    height: 100%;
    position: relative;
    top:100px;

    .button {
      width: 37px;
      height: 37px;
      background: #7cc3fd;
      -webkit-box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
      box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
      text-align: center;
      line-height: 35px;
      vertical-align: top;
      margin-top: 11px;
      border: 1px solid #e5e3dd;
      border-right: none;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      cursor: pointer;
      i{
        font-size: .2rem;
        color: #fff;
      }
    }
  }
}

/* 底固定栏 */
.word-tag-div{
  //bottom: 180px;
  .sth{
    //background-color: rgba(0, 1, 17, 0.2);
    height: 50px;
    width: 250px;
    //background-color: rgb(127, 132, 138, 0.1);
    font-size: 10px;
    color: rgb(240, 241, 245);
    text-align: right;
    -webkit-transition: right .3s;
    transition: right .3s;
    position: absolute;
    bottom: 10px;
    right: 50px;
    z-index: 98;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  /*right490 为何不能在 sth里定义 */
  /*    .right490{
        right: 500px;
      }
      .right50{
        right: 50px;
      }*/
}

/** 底固定栏 */
.foot-div{
  z-index: 91;
  position: absolute;
  right: 0px;
  .bottom-player{
    width: 100%;
    bottom: 0;
    //height: 180px;
    background-color: #ffffff;
    z-index: 99;

    .foot-play-frame{
      width:100%;
      height:100%;
      .box_site5 {
        width:100%;
        height:100%;
        background-color: #000;
        display: flex;
        flex-wrap: wrap;

        /*      .div_main5 {
                width: calc(100% / 2);
                height: calc(100% / 2);
                border: 1px solid #14edc5;
                box-sizing: border-box;

              }*/
        .div_site5 {
          width: calc(100% / 5);
          height: 100%;//calc(100% / 2);
          border: 1px solid #0c0c0c;
          box-sizing: border-box;
        }
      }
    }
  };
  .hight180{
    height: 180px;
  };
  .hight0{
    height: 0px;
  };

}
/** 底部按钮 */
.foot-btn-div {
  .foot-button {
    position: absolute;
    /*    height: 100%;
        position: relative;*/

    width: 60px;
    height: 24px;
    left:50%;
    //bottom:0;
    background: #7cc3fd;
    -webkit-box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
    box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
    text-align: center;
    line-height: 35px;
    vertical-align: top;
    margin-top: 11px;
    border: 1px solid #e5e3dd;
    border-bottom: none;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    i{
      font-size: .2rem;
      color: #fff;
    }
  };
  .bottom180{
    bottom:180px;
  }
  .bottom0{
    bottom:0;
  }
}


/*左抽屉 */
.left-div {
  //top: 70px;
  //bottom: 0;
  //position: absolute;
  //left: 0;
  //z-index: 20;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  background-color: rgba(255,255,255,0);

  .width300 {
    width: 300px;
  }
  .width0 {
    width: 0px;
  }
  .button-div{
    width: 100%;
    height: 100%;
    width: 37px;
    display: flex;
    align-content: center;
  }

  .drawer-box {
    height: 100%;
    overflow: auto;
    background: #fcfdff;
    float: left;
    -webkit-transition: width .3s;
    transition: width .3s;
    //border: 1px solid #14edc5;
    border: 1px solid #ffffff;
    border-top-right-radius: 5px;
    display: flex;
  }

  //滚动条设置
  .drawer-box::-webkit-scrollbar { /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }

  .drawer-box::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }


  /*.left-button {
    z-index: 9;
  }

  !* 按钮 *!

  .left-button1 {
    //float: left;
    width: 37px;
    height: 37px;
    //background: #535353;
    background: #7696d5;
    -webkit-box-shadow: -1px -1px 5px 1px rgba(0, 0, 0, 0.2);
    box-shadow: -1px -1px 5px 1px rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 35px;
    vertical-align: top;
    margin-top: 11px;
    border: 1px solid #e5e3dd;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 11;
    cursor: pointer;

    i {
      font-size: .2rem;
      color: #fff;
    }
  }*/
}

/*  .left-button-box {
    float: left;
    height: 40px;
    position: relative;
    top: 100px;
    border: 1px solid #e30c0c;
    .left-button {
      //float: left;
      width:100px;
      width: 37px;
      height: 37px;
      background: #7cc3fd;
      -webkit-box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
      box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
      text-align: center;
      line-height: 35px;
      vertical-align: top;
      margin-top: 11px;
      border: 1px solid #e5e3dd;
      border-left: none;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      cursor: pointer;
      i{
        font-size: .2rem;
        color: #fff;
      }
    }
  }*/
